<template>
  <view class="container">
    <!-- 顶部导航栏 -->
<!--    <view class="nav-bar">
      <view class="left">
        <u-icon name="arrow-left" size="32" color="#333" @click="goBack"></u-icon>
      </view>
      <view class="title">{{questionaire.name
	  }}</view>
    </view> -->
    
    <!-- 内容区域 -->
    <scroll-view class="content-scroll" scroll-y>
      <view class="content">
        <!-- 题目 -->
        <view class="question-card"
              v-for="(question, qIndex) in questionaire.questionaireQuestionList"
              :key="question.id"
        >
          <view class="question-title">{{qIndex}}. {{question.content}}</view>
		  
		  <!-- 普通选择题 -->
		  <view v-if="qIndex ===0" class="options">
		    <view
		      class="option-item"
		      v-for="(item, oIndex) in question.questionaireSelectVoList"
		      :key="item.id"
		      :class="{ 'active': userAnswers[question.id] === item.id }"
		      @click="selectOption(question.id, item.id)"
		    >
		      <view
		        class="radio-circle"
		        :class="{ 'checked': userAnswers[question.id] === item.id }"
		      >
		        <view class="inner-circle" v-if="userAnswers[question.id] === item.id"></view>
		      </view>
		      <text>{{ item.content }}</text>
		    </view>
		  </view>
		  
		  <!-- 1-5量表显示 -->
          <view v-else class="scale-container">
            <view class="scale-labels">
              <text>非常同意</text>
              <text>非常不同意</text>
            </view>
            <view class="number-scale">
              <view
                class="number-item"
                v-for="(option,oIndex) in question.questionaireSelectVoList"
                :key="option.id"
                :class="{ active: userAnswers[question.id] === option.id }"
                @click="selectOption(question.id, option.id)"
              >
                {{ option.content }}
              </view>
            </view>
          </view> 
        </view> 
        
        <!-- 提交按钮 -->
        <view class="submit-btn" @click="submitForm">
          <text>提交</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { getQuestionaireAllDetail, submitAnswers } from '@/common/api';
export default {
  data() {
    return {
      questionaireId: '',
      questionaire: [],
      userAnswers: {}
    }
  },
  onLoad(options) {
    this.questionaireId = options.id;
    this.loadData();
  },
  computed: {
  },
  methods: {
    async loadData(){
      try {
        const qRes = await getQuestionaireAllDetail(this.questionaireId);
        this.questionaire = qRes.data;
        console.log(this.questionaire);
      } catch (e) {
        console.error('加载问卷失败', e);
      }
    },
    goBack() {
      uni.navigateBack();
    },
    selectOption(questionId, optionId) {
      this.userAnswers[questionId] = optionId;
    },
    async submitForm() {
      const allQuestions = this.questionaire.questionaireQuestionList || [];
      
      // 1. 校验是否每题都有答案
      const unanswered = allQuestions.filter(q => !(q.id in this.userAnswers));
      if (unanswered.length > 0) {
        uni.showToast({
          title: '请完成所有题目再提交',
          icon: 'none'
        });
        return;
      }
      
      // 2. 构造提交数据
      const data = Object.entries(this.userAnswers).map(([questionId, selectId]) => ({
        questionId,
        selectId
      }));
      
      // 3. 发起提交请求
      try {
        const res = await submitAnswers(data);
        uni.showToast({
          title: '提交成功',
          icon: 'success'
        });
        // 提交成功后延时返回上一个页面
        setTimeout(() => {
          uni.navigateBack();
        }, 1500);
      } catch (error) {
        uni.showToast({
          title: error.message || '网络错误',
          icon: 'none'
        });
      }
    } // submitForm()
  }
}
</script>

<style lang="scss">
	.container {
		background-color: #f5f5f5;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		
		.nav-bar {
			background-color: #fff;
			padding: 20rpx 30rpx;
			display: flex;
			align-items: center;
			box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
			
			.title {
				flex: 1;
				text-align: center;
				font-size: 36rpx;
				font-weight: bold;
				color: #333;
				margin-right: 32rpx;
			}
			
			.left {
				width: 60rpx;
			}
		}
		
		.content-scroll {
			flex: 1;
			height: calc(100vh - 100rpx);
		}
		
		.content {
			padding: 20rpx 30rpx;
			
			.options {
				.option-item {
					display: flex;
					align-items: center;
					padding: 20rpx 0;
					margin-bottom: 10rpx;
					
					.radio-circle {
						width: 36rpx;
						height: 36rpx;
						border-radius: 50%;
						border: 2rpx solid #ccc;
						margin-right: 20rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						
						&.checked {
							border-color: #1890FF;
						}
						
						.inner-circle {
							width: 20rpx;
							height: 20rpx;
							border-radius: 50%;
							background-color: #1890FF;
						}
					}
					
					text {
						font-size: 30rpx;
						color: #333;
					}
					
					&.active {
						text {
							color: #1890FF;
						}
					}
				}
			}
			
			.description-card {
				background-color: #e6f7ff;
				border-radius: 12rpx;
				padding: 30rpx;
				margin-bottom: 20rpx;
				
				.description-text {
					font-size: 30rpx;
					color: #333;
					line-height: 1.6;
				}
			}
			
			.question-card {
				background-color: #fff;
				border-radius: 12rpx;
				padding: 30rpx;
				margin-bottom: 20rpx;
				box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
				
				.question-title {
					font-size: 32rpx;
					color: #333;
					margin-bottom: 30rpx;
					line-height: 1.5;
				}
				
				.scale-container {
					.scale-labels {
						display: flex;
						justify-content: space-between;
						margin-bottom: 10rpx;
						
						text {
							font-size: 28rpx;
							color: #666;
						}
					}
					
					.number-scale {
						display: flex;
						justify-content: space-between;
						background-color: #f8f8f8;
						border-radius: 8rpx;
						padding: 10rpx 0;
						
						.number-item {
							flex: 1;
							height: 70rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 28rpx;
							color: #333;
							
							&.active {
								background-color: #1890FF;
								color: #fff;
								border-radius: 8rpx;
							}
						}
					}
				}
			}
			
			.submit-btn {
				background-color: #1890FF;
				height: 90rpx;
				border-radius: 45rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 40rpx 0;
				
				text {
					color: #fff;
					font-size: 32rpx;
					font-weight: bold;
				}
			}
		}
	}
</style> 